<!--聊天列表的主界面!-->
<template>
    <div class="chatList_container">
        <van-nav-bar
                :title="$route.meta.title"
                class="header">
            <van-icon name="friends-o" size="22" slot="right" @click="pushToAddress()"/>
        </van-nav-bar>
        <div class="chatList">
            <div  v-if="notfound" class="notfound">
                <img src="img/notfound/notfound.png">
            </div>

            <div v-else class="botbox">
                <div v-for="item in chatList" :key="item.name" @click="toChat(item)">
                    <!-- 滑动单元格 -->
                    <van-swipe-cell>
                        <van-cell :border="false">
                            <div class="chatlistitem">
                                <div style="height:100%;">
                                    <img style="height:4rem;width: 4rem;margin: 0.5rem" v-if="item.isgroup===false" src="img/headimg/head_icon_2.png" alt />
                                    <img style="height:4rem;width: 4rem;margin: 0.5rem" v-if="item.isgroup===true" src="img/headimg/head_icon.png" alt />
                                </div>
                                <div style="height:100%;display:flex;flex-direction:column;padding:0.5rem 0 0.5rem 0.5rem;">
                                    <div style="flex:1;display:flex;font-size:1rem;align-items:center;line-height: 2rem">
                                        {{ item.name }}
                                    </div>
                                    <div style="line-height:2rem;" v-if="item.type==='文字'">
                                        {{ item.content.length>20? item.content.substr(0,20)+'...':item.content}}
                                    </div>
                                    <div style="line-height:2rem;" v-if="item.type==='语音'">
                                        {{ item.content.substring(item.content.length - 4) == '.amr'? "[]":"[不支持播放类型]" }}
                                    </div>
                                    <div style="line-height:2rem;" v-if="item.type==='图片'">
                                        [图片]
                                    </div>

                                </div>
                                <div style="margin-left:auto;padding:0.5rem 0 0.5rem 0.5rem;">
                                    <div style="font-size:1rem;align-items:center;line-height: 2rem">{{ item.time }}</div>
                                    <div style="line-height:2rem;">
                                        <!-- <span class="listErrorContent" v-show="item.issend===false">！未发送</span> -->
                                        <span class="listErrorContent" v-show="item.isread===false">！未读</span>
                                    </div>
                                </div>
                            </div>
                        </van-cell>
                        <template #right>
                            <van-button style="height:100%" square type="danger" text="删除" @click="deleteChat(item.id)"/>
                        </template>
                    </van-swipe-cell>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import timeTools from "../system/timeTools";
import bus from "./../../utils/bus"
    export default {
        data() {
            return {
                active: 0,

                chatList: [],
                notfound:true,
                ee:"",
            }
        },
        methods: {
            pushToAddress(){
                this.$router.push("/chatmember");
            },

            jumpPage(url){
                this.$router.push(
                    {
                        path:url
                    }
                )
            },
            getChatList() {
                this.chatList =[];
                let res = $App.getChatList();
                this.chatList = JSON.parse(res);

                //下面的代码是聊天列表的数据
                // this.chatList =[{
                //         content:'请求救援',
                //         id:'0975490',
                //         isgroup:false,
                //         isread:true,
                //         issend:true,
                //         name:'李罚',
                //         time:'2021-12-23 15:20:20',
                //         type:'文字'
                //     }, {
                //         content:'1111aa.amr',
                //         id:'0975491',
                //         isgroup:true,
                //         isread:true,
                //         issend:true,
                //         name:'讨论小组',
                //         time:'2021-12-22 23:09:19',
                //         type:''
                //     }, {
                //         content:'sss',
                //         id:'0975437',
                //         isgroup:false,
                //         isread:true,
                //         issend:false,
                //         name:'陈晨',
                //         time:'2021-12-12 15:20:20',
                //         type:'图片'
                //     }, {
                //         content:'测试一下',
                //         id:'0975436',
                //         isgroup:false,
                //         isread:false,
                //         issend:true,
                //         name:'张清华',
                //         time:'2021-12-12 15:19:20',
                //         type:'文字'
                // }, {
                //         content:'你好,在吗？',
                //         id:'0975438',
                //         isgroup:false,
                //         isread:true,
                //         issend:true,
                //         name:'陈晓霞',
                //         time:'2021-11-17 15:20:20',
                //         type:'文字'
                // }];
                if(this.chatList.length){
                    this.notfound = false;
                }
            },
            toChat(dt){
                let obj = dt;
                console.log("obj",obj);
                if(!obj.isgroup){
                    this.$router.push(
                        {
                            path:'/chatinfo',
                            query: {
                                id: obj.id,
                                name:obj.name
                            }
                        }
                    )
                }else {
                    this.$router.push(
                        {
                            path:'/groupinfo',
                            query: {
                                id: obj.id,
                                name:obj.name
                            }
                        }
                    )
                }

            },
            deleteChat(id){
                $App.delChatByPerson(id);
                this.getChatList();
            },
            //监听相关
            onmessage(data){
                //群聊人员的列表
                this.ee = data;
                this.getChatList();
            }
        },
        mounted() {
            this.getChatList();
            // window.toChatFun = this.toChatFun;
            //监听函数
            bus.$on('onmessage',dt =>{
                this.onmessage(dt);
            })
        }
    }
</script>
<style scoped>
    .chatList_container {
        width: 100%;
        /*height: 100%;*/
        /*overflow: auto;*/
        flex: 1;
        background: #f5f5f5;
        /*padding: 0 10px;*/
    }

    .header {
        background-color: #03192b;
        color: white;
    }

    /deep/.header .van-nav-bar .van-icon {
        color: white;
    }
    /deep/.header .van-nav-bar .van-nav-bar__title {
        color: white;
    }

    .chatList {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }

    .notfound{
        display: flex;
        overflow-y: auto;

        color: black;
        position: fixed;
        top: 45px;
        z-index: 999;
    }
    .notfound img{
        width: 100%;
        height: 100%;
    }
    .chatlistitem {
        height: 5rem;
        display: flex;
    }
    .chatlistitem img{
        height:100%;
    }
    .botbox{
        height: 100%;
        overflow-y: auto;

        /*color: black;*/
        /*position: fixed;*/
        /*top: 45px;*/
        /*z-index: 999;*/
    }
    .listTimeContent{
        display: inline-block;
        position: fixed;
        /* text-align: right; */
        right: 1rem;
        /*right: 1rem;*/
    }
    .listErrorContent{
        display: inline-block;
        position: fixed;
        right: 1rem;
        color: red;
        font-size: 12px;
    }

    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }



</style>